<!--
 * @description: 
 * @Author: lhr
 * @Date: 2020-12-02 19:18:43
 * @LastEditors: lhr
 * @LastEditTime: 2020-12-02 20:14:13
-->
<template>
  <teleport to="body">
    <div v-show="visible" class="dia-wrap">
        <div class="dia-main">
            <p>{{ text }}</p>
            <button @click="closeDia">关闭</button>
        </div>
    </div>
  </teleport>
</template>
<script>
export default {
  props: ["text", "visible"],
  emits: ["update:visible", "close"],
  methods: {
    closeDia() {
      this.$emit("close");
      this.$emit("update:visible", false);
    }
  }
};
</script>
<style scoped>
.dia-wrap{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dia-main{
    min-width: 200px;
    max-width: 500px;
    padding: 30px;
    text-align: center;
    background: #fff;
    border-radius: 5px;
}

</style>
